<template>
	<canvas  :canvas-id="canvasId" style="width: 200px;height: 200px;">
		hi
	</canvas>
</template>

<script>
	import UQRCode from 'uqrcodejs'
	
	export default {
		props:{
			canvasId : {
				type:String,
				default:'qrcode'
			},
			data:{
				type:String,
				default:'unknow data'
			},
			size: {
				type: Number,
				default:100
			},
			modelValue:String,
		},
		mounted() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = this.data;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext(this.canvasId, this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			
			uni.canvasToTempFilePath(
			    {
			        canvasId: this.canvasId,
			        fileType: 'png',
			        width: this.size * 2,
			        height: this.size * 2,
			        success: async res => {
			            console.log(res)
						this.$emit('update:modelValue',res.tempFilePath)
						//resovle(await this.saveTempImageToPhotosAlbum(res.tempFilePath))	
			        },
			        fail: err => {
			            console.log(err);
			        }
			    }
			    // this // 组件内使用必传当前实例
			);
			
			console.log('UQRCODE')
		}
	}
</script>

<style>
</style>